<template>
  <el-dialog :close-on-click-modal="false" modal-append-to-body lock-scroll
             top="10%" class="customer-dialog header-option"
             :title="titleName" :visible.sync="visiable" @close="cancel">
    <el-row :gutter="15" :class="{report_no_check: isdisable}">
      <el-col :span="12">
        <span class="no-drag" v-for="(element, index) in noDrag" :key="index">{{element.displayname}}</span>
        <draggable :list="options.Config" :options="{group:'people'}" @start="drag=true" @end="drag=false">
          <div class="drag" v-for="(element, index) in options.Config" :key="element.name">
            <el-checkbox class="onehead" :disabled="isCanCheck(element.name)" label="" v-model.trim="element.show"></el-checkbox><div class="move">{{element.displayname}}
            <span v-if="element.timeType === 'hhmmss' || element.timeType === 'second'" style="margin-left: 8px">({{$t('report.unit')}}：
              <span :class="{active:element.timeType === 'second'}" @click="changeTimeType(index, 'second')" style="margin: 0 2px;cursor: pointer">{{$t('public.seconds')}}</span>
              <span :class="{active:element.timeType === 'hhmmss'}" @click="changeTimeType(index, 'hhmmss')" style="margin: 0 2px;cursor: pointer">{{$t('report.hhmmss')}}</span>)
            </span>
            <!-- 接通率设置小数点位数 -->
            <span v-if="element.name == 'AcceptRate'" style="margin-left: 8px">
              ({{$t('report.potNum')}}：
              <span @click="changePotNum(index, 0)" :class="{active:!element.radixPoint}" style="margin: 0 2px;cursor: pointer">{{$t('report.potNum_0')}}</span>/
              <span @click="changePotNum(index, 1)" :class="{active:element.radixPoint === 1}" style="margin: 0 2px;cursor: pointer">{{$t('report.potNum_1')}}</span>/
              <span @click="changePotNum(index, 2)" :class="{active:element.radixPoint === 2}" style="margin: 0 2px;cursor: pointer">{{$t('report.potNum_2')}}</span>
              )
            </span>
          </div>
          </div>
        </draggable>
        <h4 v-if="headCustomConfig.length" class="tit_custom">{{$t('report.customConfigHeader')}}</h4>
        <draggable :list="headCustomConfig" :options="{group:'people1'}" @start="drag=true" @end="drag=false">
          <div class="drag" v-for="element in headCustomConfig" :key="element.name">
            <el-checkbox class="onehead" :disabled="isCanCheck(element.name)" label="" v-model.trim="element.show"></el-checkbox>
            <div class="move">{{element.displayname}}</div>
          </div>
        </draggable>
      </el-col>
      <el-col :span="12">
        <dl>
          <dt>
            <h6 class="care" v-if="isdisable">注意：与技能组无关的字段无法勾选</h6>
            <h6>{{$t('report.personalise')}}</h6>
          </dt>
          <dd>
            {{$t('report.dragOrder')}}
          </dd>
          <br><br>
          <dt>
            <h6>{{$t('report.shield')}}</h6>
          </dt>
          <dd>
            {{$t('report.attention')}}
          </dd>
          <br><br>
          <dt v-if="isShowBussReportTip">
            <h6>{{$t('report.dataTip')}}</h6>
          </dt>
          <dd v-if="isShowBussReportTip">
            {{$t('report.dataTipContent')}}
          </dd>
          <dt v-if="isShowBussReportTip2">
            <h6>{{$t('report.dataTip')}}</h6>
          </dt>
          <dd v-if="isShowBussReportTip2">
            {{$t('report.dataTipContent2')}}
          </dd>
        </dl>
      </el-col>
      <el-col :span="24">
        <el-button @click="cancel" class="primary_btn">{{$t('public.cancel')}}</el-button>
        <el-button type="primary" @click="save" class="primary_btn">{{$t('public.save')}}</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script>
  import draggable from 'vuedraggable'
  import {deepClone, m7Language} from '@/utils/m7Utils.js'
  export default {
    name: 'headerOptions',
    props: {
      show: Boolean, // 是否展示配置表头弹窗
      type: String, // 保存表头时的类型
      option: Object, // 表头数据
      isdisable: Boolean, // 禁用报表技能组筛选时字段
      headCustom: {
        type: Array,
        default: function () {
          return []
        }
      },
      isDisableHeader: { // 禁用字段name集合
        type: Array,
        default: function () {
          return []
        }
      },
      noDrag: { // 配置表头不可拖拽
        type: Array,
        default: function () {
          return []
        }
      }
    },
    data () {
      return {
        headCustomConfig: [],
        visiable: false
      }
    },
    components: {
      draggable
    },
    watch: {
      show (cur) {
        this.visiable = cur
      },
      headCustom (cur) {
        this.headCustomConfig = deepClone(cur)
      }
    },
    computed: {
      // visiable () {
      //   return this.show
      // },
      options () { // 配置表头数据转换成对应语言
        let options = this.option || {}
        if (options.Config) {
          options.Config.forEach((item) => {
            item.displayname = m7Language('reportChineseKey.' + item.displayname, null, true) || item.displayname
          })
        }
        return options
      },
      titleName () { // 配置表头标题
        let title = m7Language('reportChineseKey.' + this.options.ReportName, null, true)
        return title ? (title + this.$t('report.tableHeadeConfiguration')) : (this.options.ReportName + this.$t('report.tableHeadeConfiguration'))
      },
      isShowBussReportTip () {
        //  工单报表  配置表头   有一些文字提示
        return this.type === 'business_report_analyse'
      },
      isShowBussReportTip2 () {
        //  工单报表  配置表头   有一些文字提示
        return this.type === 'business_report_agent'
      }
    },
    methods: {
      // 配置表头有的表头需要禁止修改 判断方法
      isCanCheck (name) {
        if (this.isdisable && this.isDisableHeader.includes(name)) {
          return true
        } else {
          return false
        }
      },
      // 切换时分秒的方法
      changeTimeType (index, type) {
        this.$set(this.options.Config[index], 'timeType', type)
//        this.options.Config[index].timeType = type
      },
      //切换小数点位数
      changePotNum(index,val){
        console.log(index,val);
        this.$set(this.options.Config[index], 'radixPoint', val)
      },
      // 保存配置表头执行的方法
      save () {
        for (let i = 0; i < this.options.Config.length; i++) {
          this.options.Config[i].name = this.options.Config[i].name + '@' + this.options.Config[i].displayname
        }
        // 静态表头
        let headersStatic = deepClone(this.noDrag)
        for (let i = 0; i < this.noDrag.length; i++) {
          headersStatic[i].name = headersStatic[i].name + '@' + headersStatic[i].displayname
        }
        let data = {reportType: this.type, reportName: this.options.ReportName, headers: this.options.Config}
        data.headers = headersStatic.concat(data.headers)
        data.headers.map((item, index) => {
          item.order = index + 1
          if (this.type === 'im_report_agent' || this.type === 'im_report_agent_detail') {
            if (item.name.indexOf('instantRespTimeCount') || item.name.indexOf('responeInstantTimeRate')) {
              item.displayname = item.displayname.split('s')[1]
            }
          }
        })
        data.formulas = this.headCustomConfig
        data.formulas.map((item, index) => {
          item.order = index + 1 + 10000
        })
        if (this.type === 'im_monitor_agent_multi' || this.type === 'im_monitor_agent_call' || this.type === 'call_monitor_agent_status_log' || this.type === 'im_monitor_agent_status_log') {
          this.$store.dispatch('saveTableHeader', data).then(() => {
            this.$emit('close', 'save')
          })
          this.open2()
        } else if (this.type === 'monitor') {
          this.$emit('close', 'save', data)
        } else {
          this.$store.dispatch('saveReportTableHeader', data).then(() => {
            this.$emit('close', 'save')
          })
          this.open2()
        }
      },
      // 保存表头成功提示
      open2 () {
        this.$message({
          message: this.$t('report.tableHeadeConfigurationSuccess'),
          type: 'success'
        })
      },
      // 关闭配置表头弹窗
      cancel () {
        this.$emit('close')
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../assets/common.styl"
  .tit_custom
    font-size 14px
    color $cf-gray0
    margin 16px 0 20px
  .no-drag
    display inline-block
    margin-left 10px
    &:first-child
      margin-left 0
  .onehead
    cursor pointer
  .move
    cursor move
    margin-left 8px
  .drag
    display flex
    margin-top 8px
    line-height 20px
    color $cf-gray1
  .active
    color $c-main
  .el-row
    padding 0 26px 20px
    .el-col-24
      text-align center
      margin-top 10px
      /*.btn*/
        /*background #459ae9*/
        /*width 110px*/
        /*color #fff*/
      /*.button*/
        /*background #7ccdd1*/
        /*width 110px*/
        /*color #fff*/
    dt
      .care
        color $c-pink
        margin-bottom 10px
      h6
        color $c-prompt
        line-height 2
        font-size 12px
    dd
      color $c-prompt
      font-size 12px
      line-height 18px
</style>
